<template>
  <div>
    <el-row style="margin-bottom:20px;display:flex;justify-content:flex-start">
      <el-input placeholder="牌照" style="width:20%;margin-right:10px" v-model="planlist.carno" clearable></el-input>
      <!-- <el-input
        placeholder="行车地点"
        style="width:20%;margin-right:10px"
        clearable
        v-model="planlist.useaddress"
      ></el-input>-->
      <el-input
        placeholder="司机"
        style="width:20%;margin-right:10px"
        v-model="planlist.holder"
        clearable
      ></el-input>
      <!-- <el-date-picker
        v-model="planlist.recorddate"
        type="date"
        style="margin-right:10px"
        placeholder="出行日期"
        valueFormat="yyyy-MM-dd"
      ></el-date-picker>-->
      <el-date-picker
        v-model="planlist.recorddate"
        style="width:32%;margin-right:20px"
        type="daterange"
        rangeSeparator="至"
        startPlaceholder="出行开始日期"
        endPlaceholder="出行结束日期"
        valueFormat="yyyy-MM-dd"
        placeholder="出行时间"
        clearable
      ></el-date-picker>
      <el-button size="mini" type="primary" @click="getplaylist">搜索</el-button>
    </el-row>
    <el-row>
      <el-button size="mini" @click="addplan">添加出车计划</el-button>
      <el-button size="mini" type="primary" @click="carrefueledit">编辑</el-button>
      <el-button size="mini" type="success" @click="deletecar">删除</el-button>
      <el-button size="mini" type="info" @click="clickdaoru">导入</el-button>
    </el-row>
    <el-divider></el-divider>
    <plantable
      :carplanlist="carplanlist"
      :itemvals.sync="itemvals"
      :pagobj.sync="pagobj"
      :itemval1.sync="itemval1"
    ></plantable>
    <addplan
      :chouseval="itemvals"
      v-if="isaddplan"
      :carplanlists.sync="changezt"
      :chousebtn="btnvalue"
    ></addplan>

    <el-dialog title="导入出车计划" :visible.sync="showin" width="40%">
      <el-form labelWidth="150px">
        <el-form-item label="选择文件" class="is-required">
          <input
            type="file"
            @change="importf(this)"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showin = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="daoru">导 入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addplan from '~/components/carmanager/carplan/addplan.vue';
import plantable from '~/components/carmanager/carplan/plantable.vue';
import searchperson from '~/components/common/searchperson.vue';
import selectcarnumber from '~/components/common/selectcarnumber.vue';

export default {
  components: {
    plantable,
    addplan,
    selectcarnumber,
    searchperson,
  },
  data() {
    return {
      dialogVisible: false,
      isaddplan: false,
      addfuel: {
        carid: '',
        olitime: '',
        oilsum: 0,
        oilamount: '',
        currentmileage: 0,
      },
      showin: false,
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
      btnvalue: 0,
      itemval1: [],
      itemvals: [], // 点击获取的数据
      changezt: {}, // 添加、修改刷新状态
      itemval: {}, // 编辑传回来的d对象
      planid: [], // 删除所用的数组id
      carplanlistasd: { holder: '' },
      // 搜索选项
      planlist: {
        carno: '',
        useaddress: '',
        holder: '',
        recorddate: ['', ''],
      },
      showin: false,
      carid: '', // 牌照id
      ts: this.newStore(),
      carplanlist: [], // 出车列表,
      caridss: [],
      holder: [],
      usedetail: [],
      address: [],
      plantime: [],
      plantimedate: [],
    };
  },
  watch: {
    changezt() {
      this.getplaylist();
    },
  },
  created() {
    this.getplaylist();
  },
  methods: {
    // 编辑
    carrefueledit() {
      this.btnvalue = 2;
      if (this.itemval1.length == 1) {
        this.reload('isaddplan');
      } else if (this.itemval1.length == 0) {
        this.$message('请先选择一条出车计划');
      } else {
        this.$message('只能选择一条出车计划');
      }
    }, // 获取司机
    getpersonid(val) {
      this.carplanlistasd.holder = val.id;
    },
    // 删除车辆信息
    deletecar() {
      // console.log(this.planid, "0");
      for (let i = 0; i < this.itemval1.length; i++) {
        this.planid.push(this.itemval1[i].hash.planid);
      }
      if (this.itemval1.length > 1) {
        this.$confirm(`是否删除${this.itemval1.length}条出车计划?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle: '0E56125B90D2898A4D633F68399C1C15A40036A9D0F34C83',
            planid: this.planid,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '删除成功!',
              });
              this.getplaylist();
              // this.$emit("addcar", this.branchidlist);
            }
          });
        });
      } else if (this.itemval1.length == 1) {
        this.$confirm('是否删除该出车计划?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle: '0E56125B90D2898A4D633F68399C1C15A40036A9D0F34C83',
            planid: this.planid,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '删除成功!',
              });
              this.getplaylist();
              // this.$emit("addcar", this.branchidlist);
            }
          });
        });
      } else {
        this.$message('请先勾选一条出车计划');
      }
    },
    // 获取cardid
    getpersonid2(val) {
      this.carid = val.id2;
      this.planlist.carno = val.id;
    },
    // 获取出车列表
    getplaylist() {
      const req = {
        handle: '0E56125B90D2898A4D633F68399C1C15CD3A43E9777C4E90',
        carno: this.planlist.carno,
        address: this.planlist.useaddress,
        holder: this.planlist.holder,
        plantime: this.planlist.recorddate[0],
        twoplantime: this.planlist.recorddate[1],
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.carplanlist = ts.d.data.operation1;
          this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
          ts.d.data.operation1.forEach((ele) => {
            if (ele.hash.carno == '') {
              ele.hash.carno = '无';
            }
          });

          // console.log(this.carplanlist,'5554');
        }
      });
    },
    // 导入功能
    clickdaoru() {
      this.showin = true;
    },
    importf(obj) {
      const _this = this;

      const inputDOM = this.$refs.inputer; // 通过DOM取文件数据
      this.file = event.currentTarget.files[0];
      const rABS = false; // 是否将文件读取为二进制字符串
      const f = this.file;

      const reader = new FileReader(); // if (!FileReader.prototype.readAsBinaryString) {

      FileReader.prototype.readAsBinaryString = function (f) {
        let binary = '';

        const rABS = false; // 是否将文件读取为二进制字符串

        const pt = this;

        let wb; // 读取完成的数据

        let outdata;

        const reader = new FileReader();

        reader.onload = function (e) {
          const bytes = new Uint8Array(reader.result);

          const length = bytes.byteLength;

          for (let i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }

          const XLSX = require('xlsx');

          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              // 手动转化

              type: 'base64',
            });
          } else {
            wb = XLSX.read(binary, {
              type: 'binary',
            });
          } // outdata就是你想要的东西 excel导入的数据

          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); // excel 数据再处理

          outdata.map((v) => {
            _this.caridss.push(v.牌照);

            _this.holder.push(v.司机);

            _this.plantime.push(v.出行时间);

            _this.plantimedate.push(v.结束时间);

            _this.usedetail.push(v.出车用途);

            _this.address.push(v.行车地点);
          });

          console.log(
            _this.caridss,
            _this.holder,
            _this.plantime,
            _this.plantimedate,
            _this.usedetail,
            _this.address,
            '_this.currentmileage',
          );

          _this.reload();
        };

        reader.readAsArrayBuffer(f);
      };

      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },
    daoru() {
      const req = {
        handle: '0E56125B90D2898A4A3BF7F51B00739F7E3D05C476FEFFCD',
        carid: this.caridss,
        plantime: this.plantime,
        address: this.address,
        recordtime_end: this.plantimedate,
        usedetail: this.usedetail,
        holder: this.holder,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.$message({
            type: 'success',
            message: '添加成功!',
          });
          this.showin = false;
          this.getplaylist();
        }
      });
    },
    // 添加出车计划
    addplan() {
      this.btnvalue = 1;
      this.reload('isaddplan');
    },
    // 公共组件刷新
    reload(partsname) {
      // console.log(partsname);

      this[partsname] = false;
      this.$nextTick(() => {
        this[partsname] = true;
      });
    },
  },
};
</script>

